<template>
  <div class="mobile-container">
    <!-- 顶部导航 -->
    <van-nav-bar title="古建筑彩绘文物调查管理系统" fixed @click-right="goToUser">
      <!-- 左侧插槽：显示“首页” -->
      <template #left>
        <!-- <span class="nav-text" @click="goHome">首页</span> -->
        <van-icon name="wap-home" class="nav-text" @click="goHome" size="18" />
      </template>

      <!-- 右侧用户图标 -->
      <template #right>
        <van-icon name="user" size="18" />
      </template>
    </van-nav-bar>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="goHome">首页</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item" @click="goToCategory">文物主体管理</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item">{{ categoryname }}>详情</span>

    </div>

    <!-- 搜索与上传 -->
    <div class="search-upload-section">
      <!-- 搜索框 -->
      <van-search v-model="searchKeyword" placeholder="搜索文物名称或主题" @search="handleSearch" @clear="handleSearch"
        shape="round" class="search-bar" />
      <!-- 纯图标：搜索 -->
      <van-icon name="search" size="20" class="search-icon" @click="handleSearch" style="margin-right: 20px;" />

      <!-- 原上传按钮 -->
      <van-button type="primary" size="small" icon="plus" round class="upload-btn" @click="goToUpload">
        新增文物详情
      </van-button>
    </div>

    <!-- 可滚动内容区 -->
    <div class="scrollable-content">
      <!-- 加载状态 -->
      <div v-if="componentState === 'loading'" class="state-placeholder">
        <van-loading type="spinner" size="24" vertical>加载中...</van-loading>
      </div>

      <!-- 空状态 -->
      <div v-else-if="componentState === 'empty' || relics.length === 0" class="state-placeholder">
        <van-empty description="暂无文物详情数据" />
      </div>

      <!-- 错误状态 -->
      <div v-else-if="componentState === 'error'" class="state-placeholder">
        <van-empty description="加载失败" image="error">
          <template #bottom>
            <van-button type="danger" size="small" @click="reloadData">重试</van-button>
          </template>
        </van-empty>
      </div>

      <!-- 文物列表 -->
      <div v-else class="relic-list">
        <van-swipe-cell v-for="item in relics" :key="item.id">
          <!-- 卡片容器 -->
          <div class="relic-card">
            <!-- 主图 -->
            <div class="image-wrapper">
              <van-image width="100%" height="200px" fit="cover" :src="item.image_base64" @click="goToDetail(item.id)"
                @error="handleImageError(item)">
                <template #error>
                  <div class="image-error">图片加载失败</div>
                </template>
              </van-image>
            </div>

            <!-- 折叠面板 -->
            <van-collapse v-model="activeCollapse" :border="false">
              <van-collapse-item :name="item.id">
                <template #title>
                  <div class="relic-name">{{ item.name }}</div>
                </template>

                <div class="detail-content">

                  <!-- 关键标签：主题单独一行，其余标签在下一行 -->
                  <div class="key-info-tags">
                    <!-- 主题：独占一行 -->
                    <div class="tag-row">
                      <van-tag plain type="primary">{{ item.painting_theme || '未知主题' }}</van-tag>
                    </div>

                    <!-- 病害 + 光谱 + 3D：在下一行 -->
                    <div class="tag-row">
                      <van-tag :type="getSeverityType(item.disease_severity)" size="small">
                        {{ item.disease_severity || '无病害' }}
                      </van-tag>
                      <van-tag :type="item.hasSpectrum ? 'success' : 'default'" size="small">光谱</van-tag>
                      <van-tag :type="item.hasThreeD ? 'success' : 'default'" size="small">3D</van-tag>
                    </div>
                  </div>

                  <!-- 信息网格 -->
                  <div class="detail-grid">
                    <div class="detail-item">
                      <div class="label">纹样类型</div>
                      <div class="value">{{ item.pattern_types || '未知' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="label">构图形式</div>
                      <div class="value">{{ item.composition_style || '未知' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="label">主色调</div>
                      <div class="value">{{ item.dominant_colors || '未知' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="label">病害类型</div>
                      <div class="value">{{ item.disease_types || '无' }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="label">创建时间</div>
                      <div class="value">{{ formatDate(item.created_at) }}</div>
                    </div>
                    <div class="detail-item">
                      <div class="label">最后修改</div>
                      <div class="value">
                        {{ item.last_modified_at ? formatDate(item.last_modified_at) : '未修改' }}
                      </div>
                    </div>
                  </div>
                </div>
              </van-collapse-item>
            </van-collapse>
          </div>

          <!-- 右侧操作按钮 -->
          <template #right>
            <div class="action-buttons">
              <van-button square type="primary" size="large" @click="goToEdit(item.id)" class="action-btn">
                <van-icon name="edit" /> 编辑
              </van-button>
              <van-button square type="danger" size="large" @click="deleteRelic(item.id)" class="action-btn">
                <van-icon name="delete" /> 删除
              </van-button>
              <van-button square type="success" size="large" @click="goToDetail(item.id)" class="action-btn">
                <van-icon name="arrow-right" /> 详情
              </van-button>
            </div>
          </template>
        </van-swipe-cell>

        <!-- 分页组件 -->
        <van-pagination v-if="totalPages > 0" v-model="currentPage" :page-count="totalPages" background />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useMainPage } from '@/components/composables/useMainPage'
import { showImagePreview } from 'vant'

const {
  searchKeyword,
  relics,
  total,
  totalPages,
  currentPage,
  componentState,
  categoryname,
  loadData: loadFromAPI,
  reloadData,
  handleImageError,
  goHome,
  goToUser,
  goToCategory,
  goToEdit,
  deleteRelic,
  goBack,
  goToUpload,
  goToDetail,
  formatDate,
  handleSearch,
} = useMainPage()

const activeCollapse = ref<string[]>([]) // 控制展开项

// 判断病害严重程度对应的颜色类型
const getSeverityType = (severity: string) => {
  if (!severity) return 'default';
  switch (severity.trim()) {
    case '轻微':
      return 'primary'; // 黄色
    case '中度':
      return 'warning'; // 可以用 warning 或自定义 class（见下方扩展建议）
    case '严重':
      return 'danger';  // 红色
    default:
      return 'default'; // 其他情况灰色
  }
};
</script>

<style scoped>
/* ========== Flex 布局核心 ========== */
.mobile-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f7fa;
  font-size: 14px;
  padding-top: 46px;
  /* 为 fixed 的 navBar 补偿 */
}

/* 可滚动内容区：自动撑满剩余空间 */
.scrollable-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 0;
}

/* ========== 其他样式保持不变 ========== */
.relic-list {
  padding: 0 12px;
}

.relic-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.image-wrapper {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 12px;
}

.image-wrapper :deep(.van-image__error) {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f8fa;
  color: #969799;
  font-size: 14px;
}

.image-error {
  font-size: 14px;
  color: #969799;
}

/* van-collapse-item 的标题样式 */
:deep(.van-collapse-item__title) {
  width: 100%;
  padding-bottom: 4px;
  border-bottom: 1px dashed #ebedf0;
  margin-bottom: 1px;
}

.relic-name {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  text-align: center;
}

.detail-content {
  margin-top: 1%;
  padding-top: 1px;
  border-top: 1px solid #ebedf0;
}

/* .key-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
} */
.key-info-tags {
  flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 行间距 */
  margin-bottom: 16px;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* 标签之间的间距 */
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 14px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  margin-top: 0;
}

.label {
  color: #666;
  font-size: 12px;
  margin-bottom: 2px;
}

.value {
  color: #333;
  font-weight: 500;
  font-size: 13px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.action-btn {
  height: 100%;
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 0;
}

/* 折叠面板内边距微调 */
:deep(.van-collapse-item__content) {
  padding-top: 0px !important;
}

:deep(.van-collapse-item__wrapper) {
  padding-top: 0px !important;
}

/* 左侧导航内容布局 */
.nav-left-content {
  display: flex;
  align-items: center;
  gap: 4px;
  /* 图标与文字间距 */
  color: #1989fa;
  /* 与主题色一致 */
  font-size: 16px;
}

/* 首页文字点击区域 */
.nav-home-text {
  font-weight: 500;
}

/* 可选：hover 效果 */
.nav-left-content:hover {
  opacity: 0.8;
}

.search-upload-section {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  gap: 2px;
  /* 控制元素间距 */
}

/* 搜索框占满剩余空间 */
.search-bar {
  flex: 1;
}

/* 搜索按钮和上传按钮 */
.upload-btn {
  height: 32px;
  /* 与搜索框高度对齐 */
  padding: 0 12px;
  font-size: 14px;
}

/* 面包屑样式 */
.breadcrumb {
  padding: 8px 16px;
  background-color: #f7f8fa;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  /* 确保不被 fixed 的 nav-bar 遮挡 */
  margin-top: 0px;
  /* van-nav-bar 的默认高度 */
}

.breadcrumb-item {
  color: #1989fa;
  /* 可点击项用蓝色 */
}

.breadcrumb-item:last-child {
  color: #333;
  font-weight: 500;
}

.breadcrumb-separator {
  margin: 0 1px;
  color: #999;
}
</style>
